﻿<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keyword" content=""/>
<meta name="decoration" content=""/>
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:620px;
height:30px;
margin:50px auto;
}
.box ul li{
list-style:none;
float:left;
width:100px;
height:30px;
text-align:center;
line-height:30px;
border:1px solid red;
cursor:pointer;
}
.box ul li a{
width:100%;
height:30px;
display:block;
background:red;
text-decoration:none;
color:#ff9;
}
.box ul li ul li{
font-size:12px;
color:#333;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>新闻</li>
<li>视频</li>
<li>地图</li>
<li>贴吧·</li>
<li>登录</li>
<li id="li"><a href="javascript:;">设置</a>
<ul id="list" style="display:none">
<li>高级搜索</li>
<li>历史搜索</li>
<li>关闭预测</li>
<li>修改设置</li>
</ul>
</li>
</ul>
</div>
<script>
var li=document.getElementById("li");
var list=document.getElementById("list"); 
//var lis=document.getElementByTagName("li");
//for(i=0;i<lis.length;i++){
//lis[i].cssText=co
li.onmouseover=function(){
list.style.display="block";
}
li.onmouseout=function(){
list.style.display="none";
}
</script>
</body>
</html>